<template>
    <!-- #ifdef APP-PLUS -->
    <view class="w-full" :style="{ height: homeTop + 10 + 'px' }"></view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="w-full" :style="{ height: homeTop + 30 + 'px' }"></view>
    <!-- #endif -->
    <Store></Store>
    <Banner></Banner>
    <view id="food" class="flex w-full" ref="food">
        <view class="w-1/4 width-25">
            <Kind></Kind>
        </view>
        <view class="w-3/4 width-75 p2 pb-0">
            <text class="block w-full h-10px text-sm pt-2 pb-4">{{ nowKind }}</text>
            <Goods :foodHeight="foodHeight" :foodBottom="foodBottom" @open="open"></Goods>
        </view>
    </view>
</template>

<script setup lang="ts">
import Store from '@/component/store.vue'
import Banner from '@/component/banner.vue'
import Kind from '@/component/kind.vue'
import Goods from '@/component/goods.vue'
import { Ref, ComponentInternalInstance } from 'vue';
const props = defineProps({
    nowKind: {
        type: String,
        default: ""
    }
})
const emits = defineEmits(['open'])
const open = (e:boolean) => {
    emits('open', e)
}
let num: number = 0
let homeTop: Ref = ref<number>(num)
let foodHeight: Ref = ref<number>(num)
let foodBottom: Ref = ref<number>(num)
const instance: ComponentInternalInstance | null = getCurrentInstance()
onMounted((): void => {
    uni.getSystemInfo({
        complete(res): void {
            foodBottom.value = res.windowBottom + 20
            homeTop.value = res.statusBarHeight
            // #ifdef MP-WEIXIN || APP-PLUS
            let query = uni.createSelectorQuery().in(instance)
            query.select('#food').boundingClientRect((data: any): void => {
                // #ifdef APP-PLUS
                foodHeight.value = res.windowHeight - data.top - 70 - res.statusBarHeight
                // #endif
                // #ifdef MP-WEIXIN
                foodHeight.value = res.windowHeight - data.top - 20
                // #endif
            }).exec()
            // #endif
        }
    })
})
</script>

<style scoped>

</style>